
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加轮番图</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/css/global.css" media="all">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">

    <style>
        .layui-form-label {
            width: 10%;
        }
        .layui-input-block {
            margin-left: 13%;
        }
        img {
            width: 120px;
            height: 120px;
        }
        .layui-upload-list {
            margin-left: 13%;
        }
    </style>
</head>

<body>
<div style="margin: 15px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>添加轮番图(<label class="layui-required-tip">标红的为必填项</label>)</legend>
    </fieldset>
	<form class="layui-form" action="">
	  <div class="layui-form-item">
	    <label class="layui-form-label layui-required-tip">轮播图标题</label>
	    <div class="layui-input-block">
	      <input type="text" name="title" id="title" maxlength="100" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	   <label class="layui-form-label layui-required-tip">轮播图图片</label>
	    <div class="layui-input-block">
        <button type="button" class="layui-btn" id="btnPictureUrl"><i class="layui-icon">&#xe67c;</i>上传图片</button>
        </div>
       <div class="layui-upload-list">
        <img class="layui-upload-img" id="imgPictureUrl">
        <input type="hidden"  id="imgUrl" name="imgUrl">
       <p id="demoText" class="layui-word-aux">图片大小≤4M，支持JPG、PNG、JPEG</p>
       </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">跳转地址</label>
	    <div class="layui-input-block">
	      <input type="text" name="returnUrl" id="returnUrl" maxlength="100"  placeholder="请输入跳转地址" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label layui-required-tip">上线时间</label>
	    <div class="layui-input-block">
	      <input type="text" name="onlineTime" id="onlineTime" lay-verify="required" placeholder="请输入上线时间" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label layui-required-tip">下线时间</label>
	    <div class="layui-input-block">
	      <input type="text" name="offlineTime" id="offlineTime" lay-verify="required" placeholder="请输入下线时间" autocomplete="off" class="layui-input">
	    </div>
	  </div>

	<div class="layui-form-item">
	    <label class="layui-form-label layui-required-tip">排序</label>
	    <div class="layui-input-block">
	      <input type="text" name="sort" id="sort" maxlength="10" lay-verify="required|number" placeholder="请输入排序" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <div class="layui-input-block">
	      <button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
	      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			<a href="javascript:history.back();" class="layui-btn">返回</a>
	    </div>
	  </div>
	</form>
	</div>


 <script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script>
//Demo
layui.use(['form','layer','laydate','upload'], function(){
  var upload = layui.upload
  ,form=layui.form
  ,laydate = layui.laydate
  ,layer = layui.layer //弹层
  ,$=layui.jquery;
  
//上线时间
  laydate.render({
    elem: '#onlineTime',
    type: 'datetime'
  });
  
//下线时间
  laydate.render({
    elem: '#offlineTime',
    type: 'datetime'
  });
 
  //监听提交
  form.on('submit(formSubmit)', function(data){
	  data.field.cityName= $("#cityId").find("option:selected").text();
	  if(data.field.imgUrl==''){
  		layer.msg("请上传图片！", {icon: 5, shift: 6 });
		  return false;
  	   }
	  $.ajax({
          type : "POST",
          url : "/manage/banner/saveSyRotationMap",
          dataType : "json",
          data :data.field,
          success : function(data) {
        	  layer.alert(data.msg, {
        		    skin: 'layui-layer-molv' //样式类名  自定义样式
        		    ,closeBtn: 1    // 是否显示关闭按钮
        		    ,anim: 1 //动画类型
        		    ,btn: ['确定'] //按钮
        		    ,icon: data.code>=0?1:2    // icon
        		    ,yes:function(index){
        		    	if (data.code >= 0) {
        	                  location.href = "/manage/banner/syRotationMapList";
        	              }else{
        	            	  layer.close(index);
        	              }
        		    }});
          },
          error : function() {
              alert("系统异常,请稍后重试");
          }
      });
    return false;
  }); 
  
  var uploadInst = upload.render({
	    elem: '#btnPictureUrl',
	    url: '/manage/upload/uploadFile',
	    size:'4096',
	    exts:'jpg|png|jpeg',
	    before: function(obj) {
	        //预读本地文件示例，不支持ie8
	        obj.preview(function(index, file, result) {
	            $('#imgPictureUrl').attr('src', result); //图片链接（base64）
	        });
	        layer.load();
	    },
	    done: function(res) {
	        //上传成功
	        if (res.code == 0) {
	            $("#imgUrl").val(res.data["key"]);
	            layer.closeAll('loading');
	        }
	    },
	    error: function() {
	        //演示失败状态，并实现重传
	        var demoText = $('#demoText');
	        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs file-reload">重试</a>');
	        demoText.find('.file-reload').on('click',
	        function() {
	            uploadInst.upload();
	        });
	    }
	});
});
</script>
</body>
</html>
      